<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="姓名：" prop="">
          <el-select v-model="queryParams.id" placeholder="请选择" filterable>
            <el-option v-for="item in idList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" prop="">
          <el-select v-model="queryParams.status" placeholder="请选择" filterable>
            <el-option v-for="item in statusLs" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="listBox_head">
        <el-button type="primary" style="margin: 10px 0 20px" @click="addHandle">添加直播组账号</el-button>
      </div>
      <el-table v-loading="loading" ref="multipleTable" :data="tabList" stripe border tooltip-effect="dark"
        style="width: 100%">
        <el-table-column label="序号" align="center" type="index" width="64px" />
        <el-table-column label="角色" align="center">
          <template slot-scope="scope">
            <dict-tag :options="roleTypeLs" :value="scope.row.roleType" />
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="center" prop="name"></el-table-column>
        <el-table-column label="手机号" align="center" prop="phone"></el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
        <el-table-column label="状态" align="center" prop="statusDict">
          <template slot-scope="scope">
            <dict-tag :options="statusLs" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="lookHandle(scope.row)">查看详情</el-button>
            <el-button type="text" size="small" @click="editHandle(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList"></pagination>
    </div>
    <Dialog v-if="dialogVisible" :id="dialogId" :pathType="pathType" :visible.sync="dialogVisible"
      @success="_handleSuccess">
    </Dialog>
  </div>
</template>

<script>
import {
  commonV1LiveUserSelect, clientLiveUserList
} from "@/api/customer/livePersonnelList";

import Dialog from "./components/dialog";
export default {
  name: "",
  components: {
    Dialog
  },
  data() {
    return {
      dialogId: '',
      dialogVisible: false,
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      //表格数据
      tabList: [],
      pathType: 'add',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        nameID: '',//姓名id
        status: '',//状态
      },
      idList: [], //客户级别字典
      statusLs: [], //状态字典
      roleTypeLs: [], //角色状态字典
    };
  },
  computed: {
  },
  created() {
    this.getDict()
    this.getIdList()
    this.getList();
  },
  methods: {
    //获取状态字典
    getDict() {
      var dictType = "live_user_status,live_user_role_type";
      this.$getSelectList(dictType)
        .then((res) => {
          this.statusLs = res.result[0].dictList;
          this.roleTypeLs = res.result[1].dictList;
        })
    },
    //姓名下拉
    getIdList() {
      commonV1LiveUserSelect().then((res) => {
        this.idList = res.result;
      })
    },

    /** 查询列表 */
    getList() {
      this.loading = true;
      clientLiveUserList(this.queryParams).then(response => {
        response.result.records.forEach(item => {
          for (var key in item) {
            if (item[key] === '') {
              item[key] = "-";
            }
          }
        });
        this.tabList = response.result.records;
        this.total = response.result.total;
        this.loading = false;
      }).catch(error => {
        this.loading = false;
      });
    },
    lookHandle(row) {
       // 查看排班详情
      this.$router.push({ path: "/customer/workforceManagement/scheduleList/details", query: { id: row.id }});
    },
    // 表单重置
    reset() {
      this.date = []
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        nameID: '',//姓名id
        status: '',//状态
      },
        //   this.resetForm("queryParams");
        this.handleQuery()
    },
    //新增
    addHandle() {
      this.dialogVisible = true;
      this.pathType = 'add'
    },
    //编辑
    editHandle(row) {
      this.dialogVisible = true;
      this.dialogId = row.id
      this.pathType = 'edit'
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      this.reset();
    },
    _handleSuccess(e) {
      //成功回调
      this.getIdList()
      this.reset()
    },

  }
};

</script>
<style scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px 0;
}

.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px;
  margin-top: 10px;
}

.listBox_head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.img_box {
  width: 100px;
  height: 80px;
  border-radius: 4px;
}
</style>